<!--
 * @Date: 2025-02-28 10:06:36
 * @LastEditors: MsChen Your email MsChen
 * @LastEditTime: 2025-02-28 11:26:02
 * @FilePath: /finance/Users/chenyufan/Downloads/框架/glm-mes-pc-ui/glm-mes-pc-MES_框架/src/views/logistics/order.vue
-->

<script setup>
import { onMounted, ref, reactive } from 'vue'
import {queryExpressInfoAPI,sendOrderApi,getChildOrderListAPI,cancelMergeOrders,mergeOrders, getListAPI, getAddSFExpressAPI, getAddJDExpressAPI, getPriceQueryAPI, getAdddhlExpressAPI, getInternationalAPI } from '@/api/wuliuOrder.js'

const { proxy } = getCurrentInstance()
const { wl_wp_type } = proxy.useDict('wl_wp_type')
const { wl_status } = proxy.useDict('wl_status')
const formRef = ref()
const form = ref({
    orderNo: '',
    waybillNo: '',
    recName: '',
    sendName: '',
    isSend:'1',
    buType:"3"
})
const dialogVisible = ref(false)
const dialogMergeVisible = ref(false)
const dataList = ref([])
const mergedataList = ref([])
const dateRange = ref([])
const wudetaildata=ref({})
const wudetaildataList=ref([])

const pagination = ref({
    total: 0,
    pageSize: 10,
    pageNum: 1
})
//重量
let weight = ref(null)
const ids = ref([])
const multiple = ref(true)
async function onSearch(params) {
    console.log(wl_wp_type);

    const mergedData = ref({
        ...pagination.value,
        ...form.value
    })

    console.log(mergedData)
    const { code, rows, total } = await getListAPI(mergedData.value)
    if (code == 200) {
        dataList.value = rows
        pagination.value.total = total
    }
}
const handleSizeChange = () => {
    console.log('111')
}
const handlePageChange = (val) => {
    pagination.value.pageNum = val
    onSearch()
}
onMounted(() => {
    onSearch()
})


import { ElMessageBox } from 'element-plus'
//
const handleClose = (done) => {
    ElMessageBox.confirm('是否确定关闭新增订单?')
        .then(() => {
            done()
        })
        .catch(() => {
            // catch error
        })
}
// const handleClose = () => {
// 	('Are you sure to close this dialog?')
// 		.then(() => {
// 			done()
// 		})
// 		.catch(() => {
// 			// catch error
// 		})
// }
//
const formSize = ref('default')


// 寄快递部分数据
// 寄件人

let smStartTimes = ref('')

const ruleForm = reactive({
    sendName: "赵1111",
    sendPhone: "19868145262",
    sendAddressDetail: "山东省济南市天桥区西苑小区",
    recName: "李",
    recPhone: "18667192572",
    recAddressDetail: "山东省济南市槐荫区儿童医院",
    payType: "SHIPPER",
    cargo: "未选择",
    kuaidicom: "shunfeng",
    kuaidicomName: "顺丰",
    smStartTime: "2025-02-14 13:23",
    smEndTime: "2025-02-14 13:23",
    type: "1",
    price: 0,
    remark: "订单备注",
    weight: 83,
    num: 1,
    //国际快递新增的参数
    sendCountryCode:'',
    sendCityName:'221B Baker Street, London',
    sendZipCode:'NW1 6XE',
    recCountryCode:'',
    recCityName:'221B Baker Street, London, NW1 6XE, United Kingdom',
    recZipCode:'NW1 6XE'

})

// 选择快递部分切换效果
const isActive = ref(false);
const isSiblingActive = ref(false);
//切换快递
const toggleClass = async () => {
    ruleForm.kuaidicomName = '京东'
    isActive.value = !isActive.value;
    isSiblingActive.value = false;
    let prices = reactive({
        kuaidicom: 'jd',
        sendAddr: ruleForm.sendAddressDetail,
        recAddr: ruleForm.recAddressDetail,
        weight: ruleForm.weight
    })
    let { data, code } = await getPriceQueryAPI(prices)
    //   console.log(data[0].price);
    if (code == 200) {
        ruleForm.price = data[0].price
    }
};
const toggleSiblingClass = async (index) => {
    ruleForm.kuaidicomName = '顺丰'
    isSiblingActive.value = !isSiblingActive.value;
    isActive.value = false;
    let prices = reactive({
        kuaidicom: 'shunfeng',
        sendAddr: ruleForm.sendAddressDetail,
        recAddr: ruleForm.recAddressDetail,
        weight: ruleForm.weight
    })
    let { data, code } = await getPriceQueryAPI(prices)
    //   console.log(data[0].price);
    if (code == 200) {
        ruleForm.price = data[0].price
    }

}

// if(ruleForm.kuaidicomName=='顺丰'){
// 	isSiblingActive.value = true
// }
const rules = reactive({
    //寄件人验证输入
    sendName: [
        { required: true, message: '请输入寄件人姓名', trigger: 'blur' },
    ],
    sendAddressDetail: [
        { required: true, message: '请输入寄件人地址', trigger: 'blur' },

    ],
    sendPhone: [
        { required: true, message: '请输入手机号码', trigger: 'blur' },
        { min: 11, max: 11, message: '请输入有效手机号码', trigger: 'blur' },
    ],
    //收件人验证输入
    recName: [
        { required: true, message: '请输入寄件人姓名', trigger: 'blur' }
    ],
    recPhone: [
        { required: true, message: '请输入手机号码', trigger: 'blur' },
        { min: 11, max: 11, message: '请输入有效手机号码', trigger: 'blur' },
    ],
    recAddressDetail: [
        { required: true, message: '请输入详细地址', trigger: 'blur' }
    ],
})




const activeName = ref('first')

const handleClick = (tab, event) => {
    console.log(tab, event)
}


import dayjs from 'dayjs';





//新增订单
const submitForm = async (formEl) => {
    // const formattedDate = new Intl.DateTimeFormat(undefined, {
    // 	year: 'numeric',
    // 	month: '2-digit',
    // 	day: '2-digit',
    // 	hour: '2-digit',
    // 	minute: '2-digit'
    // }).format(smStartTimes.value);
    // ruleForm.smStartTime = formattedDate
    // smStartTimes.value = dayjs();
    ruleForm.smStartTime = dayjs(smStartTimes.value).format('YYYY-MM-DD HH:mm');
    console.log(ruleForm.smStartTime);
    if (ruleForm.kuaidicomName == '顺丰') {
        const res = await getAddSFExpressAPI(ruleForm)
        console.log(res);
    } else if (ruleForm.kuaidicomName == '京东') {
        const res = await getAddJDExpressAPI(ruleForm)
        console.log(res);
    }else if (ruleForm.kuaidicomName == 'DHL') {
        let res = await getAdddhlExpressAPI(ruleForm)
        console.log(res);
    }
    onSearch()
    dialogVisible.value = false
    ruleForm.smStartTime = ''
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })


}



//物品信息
const information = (item) => {
    console.log(item);
    ruleForm.cargo = item
}




//
const Paymentmethod = [
    {
        value: 'SHIPPER',
        label: '寄方付',
    },
    {
        value: 'CONSIGNEE',
        label: '到付',
    },
    {
        value: 'MONTHLY',
        label: '月结',
    }
]




//寄国际-----------------------------------------------------------------------------------
const countryoptions = [
    {
        value: 'CN',
        label: '中国',
    },
    {
        value: 'ID',
        label: '印度尼西亚',
    },
    {
        value: 'PT',
        label: '葡萄牙',
    },
    {
        value: 'DK',
        label: '丹麦',
    },
    {
        value: 'LU',
        label: '卢森堡',
    },
    {
        value: 'HR',
        label: '克罗地亚',
    },
    {
        value: 'UA',
        label: '乌克兰',
    },
    {
        value: 'HU',
        label: '匈牙利',
    },
    {
        value: 'US',
        label: '美国',
    },
    {
        value: 'UY',
        label: '乌拉圭',
    },
    {
        value: 'IN',
        label: '印度',
    },
    {
        value: 'MX',
        label: '墨西哥',
    },
    {
        value: 'IT',
        label: '意大利',
    },
    {
        value: 'MY',
        label: '马来西亚',
    },
    {
        value: 'ES',
        label: '西班牙',
    },
    {
        value: 'AR',
        label: '阿根廷',
    },
    {
        value: 'BR',
        label: '巴西',
    },
    {
        value: 'CL',
        label: '智利',
    },
    {
        value: 'CO',
        label: '哥伦比亚',
    },
    {
        value: 'PE',
        label: '秘鲁',
    },
]
// 快递
//获取国际快递地址解析
//地址参数
let chengshi = reactive({
    sendcity:'',
    sendroute:'',
    reccity:'',
    recroute:'',
})
let senddhlparameter = reactive({
    countryCode:'CN',
    address:ruleForm.sendCityName,
    language:'en'
})
let recdhlparameter = reactive({
    countryCode:'CN',
    address:ruleForm.recCityName,
    language:'en'
})
const getsendDHLlist= async()=>{
    console.log(senddhlparameter);

    let res = await getInternationalAPI(senddhlparameter)
    console.log(res);

}
const getrecDHLlist= async()=>{
    let res = await getInternationalAPI(recdhlparameter)
    console.log(res);

}

const togDHlClass = async (index) => {
    ruleForm.kuaidicomName = 'DHL'
    ruleForm.type = 3
    isSiblingActive.value = !isSiblingActive.value;
    isActive.value = false;
    getsendDHLlist()
    getrecDHLlist()
    let prices = reactive({
        kuaidicom: 'dhl',
        sendAddr: ruleForm.sendAddressDetail,
        recAddr: '221B Baker Street, London, NW1 6XE, United Kingdom',
        weight: ruleForm.weight,
        // sendCountryCode: ruleForm.sendCountryCode,
        // recCountryCode: ruleForm.recCountryCode,

    })
    // let { data, code } = await getAdddhlExpressAPI(prices)
    // //   console.log(data[0].price);
    // if (code == 200) {
    // 	ruleForm.price = data[0].price
    // }
    let { data, code } = await getPriceQueryAPI(prices)
    //   console.log(data[0].price);
    if (code == 200) {
        ruleForm.price = data[0].price
    }

}


// 多选框选中数据
function handleSelectionChange(selection) {
    ids.value = selection.map(item => item.id)
    multiple.value = !selection.length
}


//w物流轨迹
let wlgjdetail = async (index, row) => {
            const gjParam={
                id:row.id
            }
            let res = await queryExpressInfoAPI(gjParam)
             dialogMergeVisible.value=true
             wudetaildata.value=res.data
             wudetaildataList.value=res.data.data

            console.log(res);
            console.log(wl_status.value);
}


const getWlStatus=(status)=>{
    console.log(status,"数组")
  //从 wl_status 查询匹配的状态的文本
    let find = wl_status.value.find(item => item.value === status);
    if(find){
        return  find.label
    }
}


</script>

<template>
    <div>
        <div class="card">
            <el-form :ref="formRef" :inline="true" :model="form" class="search-form">

                <el-form-item label="下单时间：">
                    <el-date-picker
                            v-model="form.orderStartTime"
                            type="date"
                            range-separator="至"
                            placeholder="请选择日期"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="YYYYMMDD"
                    />
                </el-form-item>
                <el-form-item label="至：">
                    <el-date-picker
                            v-model="form.orderEndTime"
                            type="date"
                            range-separator="至"
                            placeholder="请选择日期"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            value-format="YYYYMMDD"
                    />
                </el-form-item>

                <el-form-item label="订单号：" prop="orderNo">
                    <el-input v-model="form.orderNo" placeholder="请输入订单号" clearable />
                </el-form-item>
                <el-form-item label="运单号：" prop="waybillNo">
                    <el-input v-model="form.waybillNo" placeholder="请输入运单号" clearable />
                </el-form-item>
                <el-form-item label="寄件人" prop="sendName">
                    <el-input v-model="form.sendName" placeholder="请输入寄件人姓名" clearable />
                </el-form-item>
                <el-form-item label="收货人" prop="recName">
                    <el-input v-model="form.recName" placeholder="请输入收货人姓名" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSearch">搜索</el-button>
                    <el-button type="primary" size="default">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="card">
            <div class="btns">
<!--                <el-button type="primary" @click="dialogVisible = true">新增订单</el-button>-->
<!--                <el-button type="primary">寄件</el-button>-->
<!--                <el-button type="primary">打印快递单</el-button>-->
<!--                <el-button type="primary"  @click="handleMearge">合并订单</el-button>-->
            </div>
            <div>

            </div>

            <el-dialog v-model="dialogMergeVisible" width="1200" >
                <template #footer>
                    <div style="font-weight: bolder;text-align: left">
                        运单号：{{wudetaildata.nu}}
                    </div>
                    <div style="font-weight: bolder;text-align: left">
                        物流状态：{{getWlStatus(wudetaildata.state)}}
                    </div>

                    <div v-for="(item, index) in wudetaildataList" :key="index"   style="margin-top: 10px;padding:20px;border: 1px solid #e7eaec">
                        <div style="text-align: left">
                            {{item.time}}
                        </div>
                        <div style="text-align: left">
                            {{item.context}}
                        </div>
                    </div>
                </template>
            </el-dialog>
            <div>

            </div>
            <el-table :data="dataList" style="width: 100%" border  @selection-change="handleSelectionChange">
                <el-table-column prop="id" label="订单Id" width="180" />
                <el-table-column prop="orderTime" label="下单时间" width="180" />
                <el-table-column prop="orderNo" label="订单号" width="180" />
                <el-table-column prop="waybillNo" label="运单号" width="300" />
                <el-table-column prop="status" label="订单状态" width="180" >
                    <template #default="scope">
                        <dict-tag :options="wl_status" :value="scope.row.status" />
                    </template>
                </el-table-column>
                <el-table-column prop="kuaidicomName" label="快递公司" width="180" />
                <el-table-column prop="expType" label="产品类型" />
                <el-table-column prop="cargo" label="物品" />
                <el-table-column prop="num" label="数量" />
                <el-table-column prop="weight" label="总重量" width="180" />
                <el-table-column prop="sjPrice" label="实际费用" width="180" />
                <el-table-column prop="orderTime" label="下单时间" width="180" />
                <el-table-column prop="sendName" label="寄件人" width="180" />
                <el-table-column prop="sendPhone" label="寄件人手机" width="200" />
                <el-table-column prop="sendAddressDetail" label="寄件人地址" width="300" />
                <el-table-column prop="recName" label="收件人姓名" width="200" />
                <el-table-column prop="recPhone" label="收件人手机" width="200" />
                <el-table-column prop="recAddressDetail" label="收件人地址" width="300" />
                <el-table-column prop="smStartTime" label="预约取货时间" width="300" />
                <el-table-column prop="sendTime" label="发货时间" width="300" />
                <el-table-column fixed="right" label="操作" min-width="120">
                    <template #default="scope">
                        <el-button   link type="primary" size="small" @click="wlgjdetail(scope.$index, scope.row)">
                            物流追踪
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="card">
            <el-pagination :current-page="pagination.pageNum" :page-size="pagination.pageSize" background
                           layout="prev, pager, next" :total="pagination.total" @size-change="handleSizeChange"
                           @current-change="handlePageChange" style="justify-content: right" />
        </div>
    </div>
</template>

<style lang="scss" scoped>
.active {
  color: #fff;
  background-color: #0082fa;
}

::v-deep .el-dialog__body {
  padding: 0;
}

.demo-ruleForm .el-form-item {
  flex-direction: column;
}

.above {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.above span {
  font-size: 12px;
}

.wp {
  margin-left: 30px;
}

.wp .demo-ruleForm {
  flex-direction: column;
}

.demo-ruleForm {
  display: flex;
  justify-content: space-around;
}

.demo-ruleForm>div {
  width: 500px;
}

.btns {
  margin-bottom: 20px;
}

.card {
  background: #fff;
  margin: 20px;
  padding: 20px 20px 0 20px;
}

.sender-fontwant {
  font-size: 18px;
  font-weight: 600;
  margin: 10px;
}

::v-deep .navigation {
  margin-top: 10px;
  background-color: #fff2e5;
  color: #ff8923;
  text-align: left;
  font-size: 12px;
  padding: 5px;
}

.expresssmo {
  width: 100px;
  height: 90px;
  margin-left: 40px;
  overflow: hidden;
  text-align: center;
  border-radius: 5px;
  box-shadow: 0px 0px 10px #b3b0b0;
}

.expresssmo>:nth-child(1) {
  border-bottom: 1px solid #b3b0b0;
  font-size: 14px;
  margin-bottom: 10px;
}

.express-number {
  color: #ff8341;
}

.expressdeliveryfelx {
  display: flex;
}

.number-plea {
  width: 400px;
  margin-left: 40px;
  display: flex;
  align-items: center;
}
</style>
